<template>
    <div class="view-wrapper">
        <div class="main">
            <div class="main_title">查看详情</div>
            <div class="main_body">
                <div class="item_box">
                    <div class="item_box_title">
                        <span class="title_garden"></span>
                        <span class="title_word">基本信息</span>
                    </div>
                    <div class="item_box_body">
                        <el-table :data="basicInfoList" stripe border tooltip-effect="dark" style="width: 100%">
                            <el-table-column label="角色" align="center" prop="roleType">
                                <template slot-scope="scope">
                                    <dict-tag :options="roleTypeLs" :value="scope.row.roleType" />
                                </template>
                            </el-table-column>
                            <el-table-column label="姓名" align="center" prop="name"></el-table-column>
                            <el-table-column label="本月计划直播时长" align="center" prop="planHour">
                                <template slot-scope="scope">
                                    <div>{{scope.row.planHour}}小时</div>
                                </template>
                            </el-table-column>
                            <el-table-column label="本月累计直播时长" align="center" >
                                <template slot-scope="scope">
                                    <div>{{scope.row.liveHour}}小时{{scope.row.liveMinute}}分{{scope.row.liveSecond}}秒</div>
                                </template>
                            </el-table-column>
                            <el-table-column label="累计直播时长" align="center" prop="totalLiveTime"></el-table-column>
                            <el-table-column label="工作状态" align="center" prop="status">
                                <template slot-scope="scope">
                                    <dict-tag :options="statusLs" :value="scope.row.status" />
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="item_box">
                    <div class="item_box_title">
                        <span class="title_garden"></span>
                        <span class="title_word">直播信息</span>
                    </div>
                    <div class="item_box_nav">
                        <el-form :model="queryParams" ref="queryForm" :inline="true">
                            <el-form-item label="直播日期：" prop="">
                                <el-date-picker clearable v-model="liveDate" type="monthrange" format="yyyy-MM"
                                    value-format="yyyy-MM" range-separator="至" start-placeholder="开始日期"
                                    end-placeholder="结束日期" @change="hangeTime" placeholder="请选择">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
                                <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="item_box_body">
                        <el-table v-loading="loading" :data="liveStreamingInfoList" stripe border tooltip-effect="dark"
                            style="width: 100%">
                            <el-table-column label="序号" align="center" type="index" width="80px" />
                            <el-table-column label="直播年月" align="center" prop="date"></el-table-column>
                            <el-table-column label="计划直播时长" align="center" prop="planHour">
                                <template slot-scope="scope">
                                    <div>{{scope.row.planHour}}小时</div>
                                </template>
                            </el-table-column>
                            <el-table-column label="实际直播时长" align="center" prop="liveTime"></el-table-column>
                            <el-table-column label="操作" align="center" fixed="right" width="200">
                                <template slot-scope="scope">
                                    <el-button type="text" size="small" @click="lookHandle(scope.row)">查看明细</el-button>
                                    <el-button type="text" size="small" @click="exportHandle(scope.row)">导出</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                            :limit.sync="queryParams.pageSize" @pagination="getList"></pagination>
                    </div>
                </div>
            </div>
        </div>
        <Dialog v-if="dialogVisible" :userInfo="userInfo" :visible.sync="dialogVisible" @success="_handleSuccess"></Dialog>
    </div>
</template>

<script>
import {
    workforceStatisticsDateList, workforceUserStatisticsDetail
} from "@/api/customer/scheduleList";
import axios from "axios";
import {getToken} from "@/utils/auth";
import Dialog from "./components/dialog";
import { parseTime } from '@/utils/index.js'
export default {
    data() {
        return {
            basicInfoList: [], //基本信息列表
            liveStreamingInfoList: [], //直播信息列表
            userInfo: {
                date:'',//	日期
                name:'',//姓名
                userId:'',//人员ID
            },
            dialogVisible: false,
            liveDate: '',//直播日期
            // 遮罩层
            loading: false,
            // 总条数
            total: 0,
            monthDate: '',//当前月
            statusLs:[], //工作列表
            roleTypeLs:[],//角色列表
            exportTitle:'',//导出表格
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                beginDate: '',//创建开始时间
                endDate: '',//创建结束时间
                userId:'',
            },
        }
    },
    components: {
        Dialog
    },
    created() {
        this.queryParams.userId = this.$route.query.id
        this.userInfo.userId = this.$route.query.id
        this.getDict()
        this.getMonthFunc()
        this.getWorkforceUserStatisticsDetail()
        this.getList()
    },
    methods: {
        //获取状态字典
        getDict() {
        var dictType = "live_user_status,live_user_role_type";
        this.$getSelectList(dictType)
            .then((res) => {
            this.statusLs = res.result[0].dictList;
            this.roleTypeLs = res.result[1].dictList;
            })
        },
        // 获取本月
        getMonthFunc() {
            let month = new Date()
            this.monthDate = parseTime(month, '{y}-{m}')
        },
        // 获取单个列表用户详情
        getWorkforceUserStatisticsDetail() {
            var data = {
                date: this.monthDate,
                id: this.queryParams.userId
            }
            workforceUserStatisticsDetail(data).then(res => {
                this.basicInfoList = []
                this.basicInfoList.push(res.result)
                this.userInfo.name = res.result.name
            })
        },
        //处理时间
        hangeTime(e) {
            this.queryParams.beginDate = e[0]
            this.queryParams.endDate = e[1]
        },
        // 查看明细
        lookHandle(row) {
            this.dialogVisible = true
            this.userInfo.date = row.date
        },
        // 表单重置
        reset() {
            this.liveDate = []
            this.queryParams.pageNum = 1
            this.queryParams.pageSize = 10
            this.queryParams.beginDate = ''
            this.queryParams.endDate = ''
            this.handleQuery()
        },
        /** 查询列表 */
        getList() {
            this.loading = true;
            workforceStatisticsDateList(this.queryParams).then(response => {
                response.result.records.forEach(item => {
                    for (var key in item) {
                        if (item[key] === '') {
                            item[key] = "-";
                        }
                    }
                });
                this.liveStreamingInfoList = response.result.records;
                this.total = response.result.total;
                this.loading = false;
            });
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            // this.resetForm("queryForm");
            this.reset();
        },
        // 导出
        exportHandle(row) {
            this.exportTitle = `${this.userInfo.name}${row.date}直播明细列表`
            let params = {    
                date:row.date,
                userId:this.$route.query.id
            }
            const API = process.env.VUE_APP_BASE_API + '/client/live/user/workforce/statistics/date/list/export';
            axios.get(API, {
              params: params,
              responseType: "arraybuffer",
              headers: {
                "X-Access-Token": getToken(),
              },
            })
            .then((res) => {
              this.handleData(res);
            }).finally(() => {
             
            });
           
        },
        // 导出表格
        handleData(res) {
            const blob = new Blob([res.data]);
            const downloadElement = document.createElement("a");
            const href = window.URL.createObjectURL(blob); // 创建下载的链接
            downloadElement.href = href;
            downloadElement.download = this.exportTitle + ".xls"; // 下载后文件名
            document.body.appendChild(downloadElement);
            downloadElement.click(); // 点击下载
            document.body.removeChild(downloadElement); // 下载完成移除元素
            window.URL.revokeObjectURL(href); // 释放掉blob对象
        },
        _handleSuccess(e) {
            //成功回调
            //   this.resetQuery()
            this.getList()
        },
    }

}
</script>

<style scoped lang="scss">
::v-deep {
    .main {
        box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
        background-color: #fff;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 14px;

        .main_title {
            font-size: 18px;
            font-weight: bold;
            color: #1890ff;
            padding-left: 10px;
            border-left: 4px solid #1890ff;
            margin: 20px 0;
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }

        .main_body {
            .item_box {
                &:first-child {
                    margin-bottom: 40px;
                }

                .item_box_title {
                    font-size: 16px;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    margin-bottom: 20px;
                    font-weight: bold;

                    .title_garden {
                        width: 6px;
                        height: 6px;
                        border-radius: 50%;
                        background: #222222;
                        margin-right: 5px;
                    }
                }
            }
        }


    }
}
</style>